<template>
    <div>

        
        <page-container 
        :header-ceiling="pageConfig.header.ceiling"
        :header-ceiling-color="pageConfig.header.ceilingColor"
        :header-regular="pageConfig.header.regular"
        :header-color="pageConfig.header.background"
        :footer-regular="pageConfig.footer.regular"
        :footer-color="pageConfig.footer.background"
        >
            <template  v-slot:content>
                <mask-image :url="backImage" :height="500">
                    <template>
                        <div class="mask-iamge-text">
                            <section-title title="博客" size="max"></section-title>
                        </div>
                        
                    </template>
                </mask-image>
               
                <div class="search-mian">
                
                    
                    <div class="serach-body" >
                        <div class="search-data" >
                            <div v-show="page.records.length==0" style="min-height: 120vh;display: flex;align-items: center;justify-content: center;">
                                <el-empty description="暂无结果~"></el-empty>
                            </div>
                            <records :data-list="page.records" :min-height="'800px'" @record="totoDetails">
                                
                            </records>
                            <i-page :to-top="true" :current="page.current" :size="page.size" :total="page.total" @change-page="changePage"></i-page>
                        </div>
                        <div class="srarch-ability">
                            <div class="search-form">
                                <el-form  :model="search"  >
                                    <el-form-item>
                                        <div class="search-form-item">
                                            <div class="search-input">
                                                <el-input v-model="search.value" placeholder="请输入要搜索的内容..."/>
                                            </div>
                                            
                                            <div class="search-btn" @click="searchHandler">
                                                <i class="el-icon-search"></i>
                                            </div>
                                        </div>
                                        
                                    </el-form-item>
                                
                                </el-form>
                            </div>
                            <div>
                                <section-title title="推荐"></section-title>
                                <div style="text-align: center;width: 100%;">
                                    <div 
                                    style="margin-bottom: 10px;border: 1px solid #dcdfe6;width: 460px;height: 260px;cursor: pointer;" 
                                    v-for="(advert,index) in advertList" 
                                    :key="index"
                                    @click="gotoHerf(advert)"
                                    >
                                        <div v-if="advert.type === 1">
                                            <el-image style="width: 460px;height: 260px;" :src="advert.url">  </el-image>
                                        </div>
                                        <div v-if="advert.type === 2">
                                            <video style="width: 460px;height: 260px;" >
                                                <source :src="advert.url" type="video/mp4" />
                                            </video>
                                        </div>
                                        <div v-if="advert.type === 3" style="width: 460px;height: 260px;display: flex;justify-content: center;align-items:center;">
                                            {{ advert.slogan }}
                                        </div>
                                    </div>
                                </div>

                            </div>
                            
                            <!-- <div>
                                <section-title title="分类"></section-title>
                                <classify-list :data-list="classifyList" @handler="gotoClassify" @more="showMoreClassify"></classify-list>
                            </div> -->
                            
                            
                            

                        </div>
                    </div>
                   
                </div>
            </template>
       </page-container>

    </div>
</template>

<script>

import PageContainer from '@/components/container/page-container/PageContainer';
import SectionTitle from '@/components/plugs/section-title/SectionTitle';
import ClassifyList from '@/components/plugs/classify-list/ClassifyList';
import CardList from '@/components/plugs/card-list/CardList';

import MaskImage from '@/components/plugs/mask-image/MaskImage';
import Records from '@/components/plugs/records/Records.vue';
import IPage from '@/components/plugs/i-page/IPage.vue';

import {get,post} from '@/utils/api.js'


export default {

    data(){
        return{
            pageConfig:{
                header:{
                    regular:true,
                    ceiling:true,
                    background:'transparent',
                    ceilingColor:'#1E171F'
                },
                footer:{
                    regular:true,
                    background:'#1E171F'
                }
            },
            backImage:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/carousel/bread-bg-about.jpg',
            search:{

            },
            classifyList:[
                {name:'Java',num:56},
                {name:'Vue',num:53},
                {name:'MySQL',num:99},
                {name:'Docker',num:65},
                {name:'Redis',num:62}
            ],
            page:{
                total:0,
                size:10,
                current:1,
                records:[],
                config:{
                    set:[10,20,30,40]
                }

            },
            advertList:[]
        }
    },
    methods:{
        getPage(){
            const promise = get({
                url:'/base-blog/front/blog/search',
                params:{current:this.page.current,size:this.page.size,title:this.search.value}
            },false);

            promise.then(res=>{
                // console.log(res);
                if(res&&res.code === 200){
                    this.page.current = res.data.current;
                    this.page.size = res.data.size;
                    this.page.total = res.data.total;
                    this.page.records = res.data.records;
                    document.scrollingElement.scrollTop = 0;
                }
            })


        },
        searchHandler(){
            
            this.getPage();
        },
        changePage(page){
            this.page.current = page.current;
            this.getPage();
        },
        totoDetails(row){
            // console.log('row',row);
            this.$router.push(`/blog/details/${row.id}`);
        },
        getAdvertList(){
            const promise = get({
                url:'/base-advert/front/advert/list'
            });

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.advertList = res.data;
                }
            })        
        },
        gotoHerf(advert){
            window.location.href = advert.href;
        }
        


    },
    components:{
        'page-container':PageContainer,
        'section-title':SectionTitle,
        'classify-list':ClassifyList,
        'card-list':CardList,
        'mask-image':MaskImage,
        Records,
        IPage
    },
    created(){
        this.getPage();
        this.getAdvertList();
    }

}
</script>

<style scoped>
.mask-iamge-text{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
}
.search-mian{
    width: 100%;
    display: flex;
    justify-content: center;

}
.search-form{
    width: 100%;
    height: 120px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
.search-form>>>form{
    width: 100%;
}
.serach-body{
    display: flex;
    justify-content: space-between;
    width: 1200px;
}
.search-data{
    padding-top: 80px;
    width: 60%;
    animation: fadeIn 1s;
}
.srarch-ability{
    width: 30%;
    /* margin: 0 auto; */
    padding-bottom: 20px;
}
.search-form-item{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dcdfe6;
}
.search-btn{
   width: 20%;
    height: 50px;
    /* margin:  0 auto; */
    text-align: center;
    font-weight: 600;
    color: #FF6900;
    font-size: 20px;
    line-height: 50px;
    
}
.search-btn:hover{
    cursor: pointer;
}
.search-input>>>input{
    border: 0;

}
.search-input{
    width: 80%;
}
.data-page{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 40px;
    animation: fadeInUp 1s;
}

</style>